<template>
	<BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="800"
		@cancel="handleCancel" @ok="handleSubmit">
		<!-- <BasicForm @register="registerForm"/> -->
		<!-- 先显示所有的景点 -->

		<a-row style="margin-bottom: 20px;">
			<a-col span="4">
				<a-span>相关景点</a-span>
			</a-col>
			<a-col span="20">
				<!-- 	//<JCheckbox v-model:value="form.allScenics" :options="AllScenics" @change="selectBox2" /> -->
				<a-col span="20">
					<a-row>
						<a-col span="3" style="margin-bottom: 10px; " v-for="(item,index) in AllScenics">
							<a-row style="margin-top:5px;">
								<a-checkbox v-model:checked="item.defaultchoiceTwo"
									@change="selectBox2(item)">{{item.label}}</a-checkbox>
							</a-row>
						</a-col>
					</a-row>
				</a-col>
			</a-col>
		</a-row>

		<a-row>
			<a-col span="4">
				<a-span>选择景点</a-span>
			</a-col>
			<a-col span="20">
				<a-row>
					<a-col span="2" style="margin-bottom: 10px; " v-for="(item,index) in selectBox">
						<a-row>
							<span style="margin-right: 10px;">{{item.label}}</span>
						</a-row>
						<a-row style="margin-top:5px;">
							<a-checkbox style="font-size: 10px;color:#a0a0a0" v-model:checked="item.defaultchoice"
								@change="selectIsDefault(index)">默选</a-checkbox>
						</a-row>
						<a-row style="margin-top:5px;width:80%;">
							<a-input placeholder="排序" v-model:value="item.sortorder" @input="inputSort"></a-input>
						</a-row>
					</a-col>
				</a-row>
			</a-col>
		</a-row>
		<!-- 选择了某个景点就放到下边，然后选择下边的景点和排序-->

<!-- 		<a-row>
			<a-col span="4">
				<a-span>选择线条颜色</a-span>
			</a-col>
			<a-col span="20">
				<color-picker v-model:pureColor="pureColor" v-model:gradientColor="gradientColor" />

			</a-col>
		</a-row> -->


	</BasicModal>
</template>

<script lang="ts" setup>
	import { ref, computed, unref, inject } from 'vue';
	import { BasicModal, useModalInner } from '/@/components/Modal';
	import { BasicForm, useForm } from '/@/components/Form/index';
	import { bsTravellinePretravellinescenicgroupFormSchema } from '../BsTravellinePlatpretravelline.data';
	import { bsTravellinePretravellinescenicgroupSaveOrUpdate, deleteBsTravellinePretravellinescenicgroupTwoOtherPost } from '../BsTravellinePlatpretravelline.api';
	import { JCheckbox } from '/@/components/Form';
	import { reactive } from 'vue';
	import { useMessage } from "/@/hooks/web/useMessage";
	import { ColorPicker } from "vue3-colorpicker";
	import "vue3-colorpicker/style.css";

	const pureColor = ref<ColorInputWithoutInstance>("red");
	const gradientColor = ref("linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%)");

	const $message = useMessage();
	const form = {
		allScenics: ''
	}

	//接收主表id
	const mainId = inject('mainId');
	// Emits声明
	const emit = defineEmits(['register', 'success']);
	const isUpdate = ref(true);
	//表单配置
	const [registerForm, { setProps, resetFields, setFieldsValue, validate }] = useForm({
		//labelWidth: 150,
		schemas: bsTravellinePretravellinescenicgroupFormSchema,
		showActionButtonGroup: false,
		baseColProps: { span: 24 }
	});

	const AllScenics = ref([] as Array)

	const selectBox = ref([] as Array)
	const daynumRef = ref(Number)
	const groupId = ref(String)
	const gs = ref([] as Array)

	function selectIsDefault(i) {
		selectBox.value[i].defaultchoice = !selectBox.value[i].defaultchoice
		selectBox.value[i].defaultchoice = !selectBox.value[i].defaultchoice
	}

	function handleCancel() {
		selectBox.value = []
		AllScenics.value = []
		gs.value = []
	}

	function selectBox2(e) {
		for (let j = 0; j < AllScenics.value.length; j++) {
			if (e.value == AllScenics.value[j].value) {
				AllScenics.value[j].sortorder = j
				if (e.defaultchoiceTwo) {
					if (selectBox.value.length == 0) {
						AllScenics.value[j].sortorder = 1
						selectBox.value.push(AllScenics.value[j])
						return
					}
					for (var i = 0; i < selectBox.value.length; i++) {
						if (selectBox.value[i].value == AllScenics.value[j].value) {

						} else {
							if (i == selectBox.value.length - 1) {
								AllScenics.value[j].sortorder = selectBox.value.length + 1
								selectBox.value.push(AllScenics.value[j])
							}
						}
					}
				} else {
					for (var i = 0; i < selectBox.value.length; i++) {
						if (selectBox.value[i].value == AllScenics.value[j].value) {
							selectBox.value.splice(i, 1)
						}
					}
				}
			}
		}
		selectBox.value.sort(function (a, b) {
			return a.sortorder - b.sortorder;
		});
	}

	function inputSort(e) {
		//排序并且将原始值改给现在值
		selectBox.value.sort(function (a, b) {
			return a.sortorder - b.sortorder;
		});
	}



	//表单赋值
	const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
		//重置表单
		setModalProps({ confirmLoading: false, showCancelBtn: !!data?.showFooter, showOkBtn: !!data?.showFooter });
		isUpdate.value = !!data?.isUpdate;
		console.log(data)

		groupId.value = data.record.id
		gs.value = data.record.gs
		let ss = data.record.ss
		if (gs.value[0].scenicid == "" && gs.value.length == 1) {
			//循环，找到label
		} else {
			for (var i = 0; i < ss.length; i++) {
				for (var j = 0; j < gs.value.length; j++) {
					if (ss[i].id == gs.value[j].scenicid) {
						gs.value[j].label = ss[i].title
						gs.value[j].value = ss[i].id
					}
				}
			}
			//直接赋值
			selectBox.value = gs.value
		}



		daynumRef.value = data.record.gs[0].daynum
		let o = {}, os = []
		for (let i = 0; i < ss.length; i++) {
			o = {}
			o.label = ss[i].title
			o.value = ss[i].id
			for (let j = 0; j < selectBox.value.length; j++) {
				if (ss[i].id == selectBox.value[j].value) {
					o.defaultchoiceTwo = true;
				}
			}
			o.sort = i;
			os.push(o)
		}
		AllScenics.value = os;
		console.log(AllScenics)
		selectBox.value.sort(function (a, b) {
			return a.sortorder - b.sortorder;
		});
		if (unref(isUpdate)) {
			//表单赋值

		}
		// 隐藏底部时禁用整个表单
		//setProps({ disabled: !data?.showFooter })
	});
	//设置标题
	const title = computed(() => (!unref(isUpdate) ? '新增' : '编辑'));
	//表单提交事件
	async function handleSubmit(v) {
		try {


			console.log(selectBox, 125)

			if (selectBox.value.length == 0) {
				return $message.createMessage.warning('请选择了景点再提交')
			}

			//组装后循环提交
			let selectScenicPionts = selectBox.value
			//先拿到主id再组装
			let o = {}
			//先删除当天的数据留下一条数据

			await deleteBsTravellinePretravellinescenicgroupTwoOtherPost({ mainId: mainId.value, dayNum: daynumRef.value });

			for (var i = 0; i < selectScenicPionts.length; i++) {
				o = {}
				o.scenicid = selectScenicPionts[i].value
				o.sortorder = selectScenicPionts[i].sortorder
				o.daynum = daynumRef.value
				o.defaultchoice = selectScenicPionts[i].defaultchoice || false
				o.travellineid = mainId.value
				o.trash = false
				if (gs.value[0].scenicid == "" && gs.value.length == 1) {
					if (i == 0) {
						o.id = gs.value[i].id
					}
				} else if (gs.value.length > 1) {
					if (gs.value[i]) {
						o.id = gs.value[i].id
					} else {
						o.id = null
					}
				} else {
					o.id = null
				}
				await bsTravellinePretravellinescenicgroupSaveOrUpdate(o, false);

				console.log(o)
			}


			//提交表单
			//关闭弹窗
			selectBox.value = []
			closeModal();

			//刷新列表
			emit('success');

		} finally {
			setModalProps({ confirmLoading: false });
		}
	}
</script>
<style lang="less" scoped>
	/** 时间和数字输入框样式 */
	:deep(.ant-input-number) {
		width: 100%
	}

	:deep(.ant-calendar-picker) {
		width: 100%
	}
</style>